<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<table id="deptTable" lay-filter="deptFilter"></table>
    <script src="/layui/layui.js"></script>
    <!--行编辑工具栏-->
    <script type="text/html" id="barRowEdit">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--头部编辑工具栏：-->
    <script type="text/html" id="toolbarHead">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        </div>
    </script>

    <!--部门添加表单-->
    <form id="deptAddForm" class="layui-form" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" name="deptName" required  lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门排序</label>
            <div class="layui-input-block">
                <input type="text" name="orderNum" required  lay-verify="required" placeholder="请输入部门排序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="启用" checked>
                <input type="radio" name="status" value="1" title="停用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="deptAddFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!--部门更新表单-->
    <form id="deptUpdateForm" class="layui-form" lay-filter="deptUpdateFilter" style="display: none">
        <input type="hidden" name="deptId">
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" name="deptName" required  lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门排序</label>
            <div class="layui-input-block">
                <input type="text" name="orderNum" required  lay-verify="required" placeholder="请输入部门排序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="启用" checked>
                <input type="radio" name="status" value="1" title="停用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="deptUpdateFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['table','layer','jquery','form'], function(){
            let table = layui.table;
            let layer = layui.layer;
            let $ = layui.jquery;
            let form = layui.form;

            //部门列表操作
            let deptTable =table.render({
                elem: '#deptTable'
                ,toolbar:'#toolbarHead'
                ,url: '/dept/queryAll' //数据接口
                ,page: true //开启分页
                ,cellMinWidth: 80
                ,cols: [
                    [//表头
                    {type:'checkbox',fixed:'left'}
                    ,{field: 'deptId', title: 'ID', sort: true, fixed: 'left'}
                    ,{field: 'deptName', title: '部门名称'}
                    ,{field: 'orderNum', title: '排序', sort: true}
                    ,{field: 'status', title: '部门状态',
                        templet: function(d){
                            return d.status==='0'?"启用":"停用"
                        }, sort: true}
                    ,{field: 'createBy', title: '创建人'}
                    ,{field: 'createTime', title: '创建时间', sort: true}
                    ,{field: 'updateBy', title: '更新人', sort: true}
                    ,{field: 'updateTime', title: '更新时间', sort: true}
                    ,{fixed: 'right', title:'操作',align:'center', width: 120,toolbar: '#barRowEdit'}
                ]
                ]
            });

            //行编辑工具栏    监听工具条
            table.on('tool(deptFilter)', function(obj){
                let data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url:"/dept/deleteById",
                            type:"DELETE",
                            data:{deptId:data.deptId},
                            dataType:"json",
                            success:function (resp) {
                                if(resp.code===0){
                                    deptTable.reload();
                                }
                            },
                            error:function () {
                                layer.msg("请求失败");
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    // layer.alert('编辑行：<br>'+ JSON.stringify(data));
                    form.val("deptUpdateFilter",data);
                    layer.open({
                        type: 1,
                        area: ['400px', '300px'],
                        content: $('#deptUpdateForm')
                    });
                }
            });

            //头部工具栏点击触发事件
            table.on('toolbar(deptFilter)', function(obj){
                let checkStatus = table.checkStatus(obj.config.id);
                let  checkData = checkStatus.data;
                switch(obj.event){
                    case 'add':
                        document.getElementById("deptAddForm").reset();
                        layer.open({
                            type: 1,
                            area: ['400px', '300px'],
                            content: $('#deptAddForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                        break;
                    case 'delete':
                        if(checkData.length===0){
                            layer.msg('请至少选择一行数据');
                            return;
                        }
                        layer.confirm('真的删除行么', function(index) {
                        let deptIds = "";
                        for (let i = 0; i <checkData.length; i++) {
                            deptIds+=checkData[i].deptId+",";
                        }
                        deptIds = deptIds.substr(0, deptIds.length - 1);
                            $.ajax({
                                url:"/dept/deleteByIds",
                                type:"DELETE",
                                data:{deptIds:deptIds},
                                dataType:"json",
                                success:function (resp) {
                                    if(resp.code===0){
                                        deptTable.reload();
                                    }
                                },
                                error:function () {
                                    layer.msg("请求失败");
                                }
                            });
                        });
                        break;
                    case 'update':
                        // layer.msg('编辑');
                        if(checkData.length!==1){
                            layer.msg('编辑只能选中一行');
                            return;
                        }
                        form.val("deptUpdateFilter",checkData[0]);
                        layer.open({
                            type: 1,
                            area:['400px', '250px'],
                            content: $('#deptUpdateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                        break;
                }
            });

            //监听头部工具栏添加提交
            form.on('submit(deptAddFilter)', function(data){
                $.ajax({
                    url:"/dept/insert",
                    type:"POST",
                    data:data.field,
                    dataType:"json",
                    success:function (resp) {
                        if(resp.code===0){
                            layer.closeAll('page');
                            deptTable.reload();
                        }
                    },
                    error:function () {
                        layer.msg("请求失败");
                    }
                });
                return false;
            });

            //监听行工具栏添加更新
            form.on('submit(deptUpdateFilter)', function(data){
                $.ajax({
                    url:"/dept/update",
                    type:"PUT",
                    data:data.field,
                    dataType:"json",
                    success:function (resp) {
                        if(resp.code===0){
                            layer.closeAll('page');
                            deptTable.reload();
                        }
                    },
                    error:function () {
                        layer.msg("请求失败");
                    }
                });
                return false;
            });

        });
    </script>
</body>
</html>